import PropTypes from 'prop-types'
import React, { Component } from 'react'
import './index.css'
export default class index extends Component {
  static defaultProps = {
    imgSrcs:[],
    imgWidth:520,
    imgHeight:280
  }
  static propTypes = {
    imgSrcs:PropTypes.arrayOf(PropTypes.string).isRequired,
    imgWidth:PropTypes.number.isRequired,
    imgHeight:PropTypes.number.isRequired,
    duration:PropTypes.number.isRequired
  }
  timer=null
  state = {
    marginLeft:0
  }
  tick = 16
  /**
   * 切换到第几张图片
   * 使用该函数经过一段动画切换
   * @param {*} index 0开始
   */
  switchTo(index) {
    //设置正确的index
    if (index < 0) {
        index = 0;
    }
    else if (index > this.props.imgSrcs.length - 1) {
        index = this.props.imgSrcs.length - 1;
    }
    //1. 根据index，计算div的最终的marginLeft
    const targetLeft = -index * this.props.imgWidth;
    //2. 得到当前的marginLeft
    let curLeft = parseFloat(window.getComputedStyle(this.div).marginLeft);
    //3. 计算运动的次数
    const times = Math.ceil(this.props.duration / this.tick);
    let curTimes = 0; //当前运动的次数
    //4. 计算每次运动的距离
    const totalDis = targetLeft - curLeft; //总距离
    const dis = totalDis / times; //每次运动的距离
    //先停止之前的动画
    clearInterval(this.timer);
    this.timer = setInterval(() => {
        curTimes++;
        curLeft += dis;
        console.log(curLeft)
        this.div.style.marginLeft = curLeft + "px";
        if (curTimes === times) {
            //停止运动
            this.div.style.marginLeft = targetLeft + "px";
            clearInterval(this.timer);
        }
    }, this.tick)
}
  // switchTo(index){
  //   if(this.timer){
  //     clearInterval(this.timer)
  //   }
  //   console.log(index)
  //   if(index < 0){
  //     index = this.props.imgSrcs.length - 1
  //     this.div.style.marginLeft = 0
  //   }else if(index > this.props.imgSrcs.length){
  //     index = 0
      
  //   }
  //   const left = index * this.props.imgWidth
  //   console.log(left)
  //   this.div.style.marginLeft = -left + 'px'
  //   //2 得到当前的marginLeft
  //   const currentLeft = -parseFloat(getComputedStyle(this.div).marginLeft)
  //   console.log(currentLeft)
  //   // 3 计算运动的次数
  //   const times = Math.ceil(this.props.duration / this.tick)
  //   let curTimes = 0
    
  //   this.timer = setInterval(() => {
  //     curTimes++
  //     console.log(curTimes)
  //     if(curTimes > times){
  //       clearInterval(this.timer)
  //     }
      
     
   
  //     index ++
  //     if(index > this.props.imgSrcs.length - 1){
  //         index = 0
  //     }
  //     // const left = index * this.props.imgWidth
  //     // console.log(left)
  //     // this.div.style.marginLeft = -left + 'px'
  //     this.switchTo(index)
  //   }, this.props.duration);

  // }
  containerRef = (el)=>{
    this.div = el
  } 
  render() {
    const imgs = this.props.imgSrcs.map((item,i)=><img alt="" key={i} src={item} style={{
      width:this.props.imgWidth,
      height:this.props.imgHeight,
      float:'left',
    }}/>)
    return (
      <div
      className='img-animation'
      ref={this.containerRef}
      style={
        {
          width:this.props.imgWidth * this.props.imgSrcs.length,
          height:this.props.imgHeight,
          // transition:;
        }
      }>
      
        {imgs}

      </div>
    )
  }
}
